<template>
    <div id="app">
        <div class="add">
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="productName">
            <br>
            产品图片地址:<input type="text" v-model="imgSrc">

            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="add">
        </div>

        <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>
                        <input type="checkbox" v-model="allCheck" @change="allCheckChange">
                        全选
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <!-- 动态生成内容tr -->
                <tr v-for="(item,index) of products" :key="item.id">
                    <td>
                        <input type="checkbox" v-model="checks" :value="item">
                    </td>
                    <td>
                        <img width="100" :src="item.imgSrc" alt="">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.productName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button @click="decrease(item)" :disabled="item.count===1">-</button>
                        &nbsp;
                        {{item.count}}
                        &nbsp;
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </table>
            <div class="add" style="text-align: center;" v-show="!products.length">没有更多数据了</div>
            <h1 class="add" style="text-align:right">总价格:{{total}}</h1>
        </div>
        <!-- <h1>{{checks}}</h1> -->
    </div>
</template>

<script>
    let local = {
        get(key) {
            return JSON.parse(localStorage.getItem(key))
        },
        set(key, value) {
            localStorage.setItem(key, JSON.stringify(value))
        }
    }
    let initialData = ([
        {
            id: 1,
            imgSrc: "https://img0.baidu.com/it/u=3422070859,2402722203&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500",
            code: "1122",
            productName: "田鑫头顶颜色",
            count: 1,
            price: 500
        },
        {
            id: 2,
            imgSrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F9345d688d43f87942d5f4437dc1b0ef41bd53a02&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670830706&t=98eb3e5a30ed1f5484887efc831e37c6",
            code: "1123",
            productName: "牛肉",
            count: 10,
            price: 35
        }
    ])
export default{
     computed: {
            total() {
                let res = this.checks.reduce((total, item) => {
                    return total += item.price * item.count
                }, 0)
                return res.toFixed(2)
            }
        },
    data () {
        return {
            allCheck: false,
            checks: [],
            code: "",
            productName: "",
            imgSrc: "",
            price: "",
            products: local.get('qf-data') ?? initialData
        }
    },
    watch: {
            checks(newChecks) {
                if (newChecks.length === this.products.length) {
                    this.allCheck = true;
                } else {
                    this.allCheck = false;
                }
            }
        },
        methods: {
            increase(current) {
                current.count++
            },
            decrease(current) {
                current.count--
            },
            allCheckChange() {
                console.log(this.allCheck)
                if (this.allCheck) {
                    this.checks = this.products;
                } else {
                    this.checks = []
                }
            },
            del(index) {
                console.log(index)
                let target = this.products.splice(index, 1)
                local.set('qf-data', this.products)
                console.log(target)
                this.checks = this.checks.filter(item => item.id !== target[0].id)
            },
            add() {
                if (!this.code || !this.imgSrc || !this.price || !this.productName) {
                    return
                }
                let obj = {
                    id: Math.random().toString(32).substring(2),
                    imgSrc: this.imgSrc,
                    code: this.code,
                    productName: this.productName,
                    count: 1,
                    price: this.price
                }
                this.products.push(obj)
                local.set('qf-data', this.products)
            }
        }
}
</script>

<style>
    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>